<template>
  <div class="border" style="-webkit-border-radius: 5px;-moz-border-radius: 5px;border-radius: 5px; padding: 5px">
    <template v-for="city in selectedCity">
      <a-tooltip v-if="city.name.length > 10" :key="city.id" :title="city.name">
        <a-tag :key="city.id" closable :afterClose="() => handleClose(id)">
          {{`${city.name.slice(0, 20)}...`}}
        </a-tag>
      </a-tooltip>
      <a-tag v-else :key="city.id" closable :afterClose="() => handleClose(city.id)">
        {{city.name}}
      </a-tag>
    </template>
    <a-tag @click="alertModal" style="background: #fff; borderStyle: dashed;">
      <a-icon type="plus" />添加城市
    </a-tag>
    <cascader-modal title="城市" :visible="cascaderVisible" @close="confirms" @confirm="showCasader" @CityModalData='cityModalData'></cascader-modal>
  </div>
</template>

<script>
import CascaderModal from '@/components/formComponents/CityModal/CityModal'
export default {
  components: { CascaderModal },
  props: ['selected', 'addEditflow'],
  data () {
    return {
      cascaderVisible: false,
      selectedCity: [],
      allCity: []
    }
  },
  mounted () {
    this.selectedCity = this.selected
  },
  watch: {
    selected: {
      handler: function (newValue) {
        this.selectedCity = this.selected
      }
    }
  },
  methods: {
    alertModal () {
      this.cascaderVisible = true
    },
    // 确定
    showCasader (data) {
      this.cascaderVisible = false
    },
    // 取消
    confirms () {
      this.cascaderVisible = false
    },
    handleClose (ele) {
      this.selectedCity.forEach((item, ind) => {
        if (item.id === ele) {
          this.selectedCity.splice(ind, 1)
        }
      })
      // console.log(this.selectedCity)
      this.$emit('col_jobCity', '', '', '', '', this.selectedCity)
    },
    cityModalData (provincvinceId, provincvinceName, cityId, cityName, selectList) {
      this.cascaderVisible = false
      let newJson = []
      if (this.addEditflow === '创建招聘流程') {
        console.log(selectList)
        for (var i = 0; i < selectList.length; i++) {
          let flag = true
          for (var j = 0; j < this.allCity.length; j++) {
            if (selectList[i].id === this.allCity[j].id) {
              flag = false
            }
          }
          if (flag) {
            this.allCity.push(selectList[i])
          }
        }
        newJson = this.allCity
      } else {
        let arr = []
        if (!this.selectedCity) {
          arr = selectList
        } else {
          arr = [...this.selectedCity, ...selectList]
        }
        for (var item1 = 0; item1 < arr.length; item1++) {
          let flag = true
          for (var item2 = 0; item2 < newJson.length; item2++) {
            if (arr[item1].id === newJson[item2].id) {
              flag = false
            }
          }
          if (flag) {
            newJson.push(arr[item1])
          }
        }
      }
      this.$emit('change', selectList.map(city => { return city.id }))
      this.$emit('col_jobCity', provincvinceId, provincvinceName, cityId, cityName, newJson)
    }
  }
}
</script>

<style>

</style>
